<!-- 年度点评管理 -->

<template>
    <!-- 面包屑导航 -->
    <a-breadcrumb>
        <a-breadcrumb-item>admin</a-breadcrumb-item>
        <a-breadcrumb-item>年评管理</a-breadcrumb-item>
    </a-breadcrumb>

    <div style="margin: 15px 0;">
        <!-- 视频类型选择 -->
        <a-form-item field="videoCate" label="类型">
            <a-select v-model="videoCate" @change="videoCateOnSelected" :style="{width:'120px'}" placeholder="选择分类">
                <a-option :value="cate.id" v-for="cate in cateList">{{cate.name}}</a-option>
            </a-select>
        </a-form-item>

        <!-- 数据表格 -->
        <div style="max-height: 620px;">
            <a-table column-resizable :columns="tableColumns" :hoverable="true" :stripe="true" :data="aReviewList"
                :scroll="{x: '120%', y: '100%'}">
                <template #operate="{ record }">
                    <a-button size="small" status="success" @click="showEditForm(record)" style="margin-left: 5px;">编辑
                    </a-button>
                    <a-popconfirm content="确定删除吗?" type="warning" @ok="deleteAReview(record.id)">
                        <a-button size="small" status="danger" style="margin-left: 5px;">删除</a-button>
                    </a-popconfirm>
                </template>
            </a-table>
        </div>

        <!-- 添加按钮 -->
        <div style="margin: 10px 0;">
            <a-button type="primary" @click="showAddForm">
                <template #icon>
                    <icon-plus />
                </template>
                <template #default>添加</template>
            </a-button>
        </div>

    </div>


    <!-- 弹出添加/编辑表单 -->
    <a-modal :title="addFormTitle" v-model:visible="addFormIsShow" @cancel="addFormCancel" @ok="addFormOk">
        <a-form :model="addAReviewFormData">
            <a-form-item field="year" label="年份">
                <a-input-number :default-value="2000" :step="1" :max="2035" :min="1992" allow-clear
                    v-model="addAReviewFormData.year" />
            </a-form-item>
            <a-form-item field="videoCate" label="类型">
                <a-select v-model="addAReviewFormData.vCate" placeholder="选择分类">
                    <a-option :value="cate.id" v-for="cate in cateList">{{cate.name}}</a-option>
                </a-select>
            </a-form-item>
            <a-form-item field="comment" label="点评">
                <a-input v-model="addAReviewFormData.comment" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
import { ref, } from 'vue';
import { IconPlus, } from '@arco-design/web-vue/es/icon';
import { Message } from '@arco-design/web-vue';
import { getAnnualReviewList, addAnnualReview, editAnnualReview, deleteAnnualReview } from '../../api/annualreview';


export default {
    components: {
        IconPlus,
    },
    setup() {
        // 表格列定义
        const tableColumns = ref([
            {
                title: 'Id',
                dataIndex: 'id',
                width: 80,
                ellipsis: true,
                tooltip: true,
            },
            {
                title: '年份',
                dataIndex: 'year',
                width: 80,
            },
            {
                title: '点评',
                dataIndex: 'comment',
            },
            {
                title: '操作',
                slotName: 'operate',
                fixed: 'right',
                width: 230,
            }
        ]);

        // 视频分类
        const cateList = ref([
            { id: 1, name: '电视剧' },
            { id: 2, name: '电影' },
            { id: 3, name: '动漫' },
        ]);

        // 选中的视频分类
        const videoCate = ref();

        // 年度点评列表数据
        const aReviewList = ref([]);

        // 是否显示添加/编辑表单
        const addFormIsShow = ref(false);

        // 表单标题
        const addFormTitle = ref('添加年度点评');

        // 表单数据存储
        const addAReviewFormData = ref({
            year: 2000,
            vCate: undefined,
            comment: '',
        });


        // 分类选择框选择事件
        const videoCateOnSelected = (cateId) => {
            getAnnualReviewList(cateId).then(res => {
                if (res.code != 200) {
                    Message.error(`获取数据失败：${res.msg}`);
                    return;
                }
                aReviewList.value = res.data;
            }).catch(err => { console.log(err) });
        };


        // 显示添加年度点评表单
        const showAddForm = () => {
            addFormTitle.value = '添加年度点评';
            addFormIsShow.value = true;
        };

        // 提交添加/编辑年度点评
        const addFormOk = () => {
            // 判断是否是编辑年度点评
            if (isEdit.value) { // 是编辑
                editAnnualReview(arId.value, addAReviewFormData.value).then(res => {
                    if (res.code != 200) {
                        Message.error(`操作失败：${res.msg}`);
                        return;
                    }
                    Message.success('操作成功');
                }).catch(err => { console.log(err) });

            } else {    // 添加年度点评
                addAnnualReview(addAReviewFormData.value).then(res => {
                    if (res.code != 200) {
                        Message.error(`操作失败：${res.msg}`);
                        return;
                    }
                    // 清空选中的视频分类数据
                    videoCate = ref();
                    Message.success('操作成功');
                }).catch(err => { console.log(err) });
            }

            isEdit.value = false;
            addAReviewFormData.value = {};
            addFormIsShow.value = false;
        };

        // 取消添加视频
        const addFormCancel = () => {
            isEdit.value = false;
            addAReviewFormData.value = {};
            addFormIsShow.value = false;
        };

        // 是否为编辑
        const isEdit = ref(false);
        // 点评id
        const arId = ref();
        // 显示编辑表单
        const showEditForm = (record) => {
            addFormTitle.value = '编辑年度点评';
            isEdit.value = true;
            arId.value = record.id;
            addAReviewFormData.value = record;
            addAReviewFormData.value.vCate = videoCate.value;
            addFormIsShow.value = true;
        };

        // 删除年度点评
        const deleteAReview = (id) => {
            deleteAnnualReview(id).then(res => {
                if (res.code != 200) {
                    Message.error(`操作失败：${res.msg}`);
                    return;
                }
                // 清空选中的视频分类数据
                videoCate = ref();
                // 清空表格数据
                aReviewList.value = [];
                Message.success('操作成功');
            }).catch(err => { console.log(err) });
        };

        return {
            tableColumns,
            cateList,
            videoCate,
            aReviewList,
            addFormIsShow,
            addFormTitle,
            addAReviewFormData,

            videoCateOnSelected,
            showAddForm,
            addFormOk,
            addFormCancel,
            showEditForm,
            deleteAReview,

        }

    }
}

</script>